<template>
  <div class="home">
    <div class="hd">
      <span>万律后台管理系统</span>
      <span @click="logout" class="f-fr f-csp">退出</span>
    </div>
    <aside class="aside">

      <el-menu
        default-active="/home/user"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <router-link v-for="(item, index) in menu" :key="index" :to='item.subpurviewList[0].path'>
          <el-menu-item  :index="item.subpurviewList[0].path">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </router-link>
      </el-menu>

      <!-- <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        >
        <router-link to="/home/user">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            用户管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/issue">
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            问题管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/bidding">
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            招标管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/case">
          <el-menu-item index="4">
            <i class="el-icon-message"></i>
            案件管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/example">
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            案例管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/playlet">
          <el-menu-item index="6">
            <i class="el-icon-setting"></i>
            法律短剧
          </el-menu-item>
        </router-link>
        <router-link to="/home/legalKnowledge">
          <el-menu-item index="7">
            <i class="el-icon-document"></i>
            法律知识
          </el-menu-item>
        </router-link>
        <router-link to="/home/lawyerAudit">
          <el-menu-item index="8">
            <i class="el-icon-setting"></i>
            律师审核
          </el-menu-item>
        </router-link>
        <router-link to="/home/lawyer">
          <el-menu-item index="9">
            <i class="el-icon-setting"></i>
            律师管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/publicWelfare">
          <el-menu-item index="10">
            <i class="el-icon-setting"></i>
            公益项目
          </el-menu-item>
        </router-link>
        <router-link to="/home/notice">
          <el-menu-item index="11">
            <i class="el-icon-message"></i>
            公告管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/banner">
          <el-menu-item index="12">
            <i class="el-icon-document"></i>
            banner管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/consult">
          <el-menu-item index="13">
            <i class="el-icon-setting"></i>
            咨询管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/classify">
          <el-menu-item index="14">
            <i class="el-icon-setting"></i>
            分类管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/team">
          <el-menu-item index="15">
            <i class="el-icon-setting"></i>
            专家团队
          </el-menu-item>
        </router-link>
        <router-link to="/home/tradeRecord">
          <el-menu-item index="16">
            <i class="el-icon-setting"></i>
            交易记录
          </el-menu-item>
        </router-link>
        <router-link to="/home/withdrawCash">
          <el-menu-item index="17">
            <i class="el-icon-setting"></i>
            提现管理
          </el-menu-item>
        </router-link>
        <router-link to="/home/organizationalStructure">
          <el-menu-item index="18">
            <i class="el-icon-setting"></i>
            组织架构
          </el-menu-item>
        </router-link>
        <router-link to="/home/permission">
          <el-menu-item index="19">
            <i class="el-icon-setting"></i>
            权限管理
          </el-menu-item>
        </router-link>
      </el-menu> -->
    </aside>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  props: {
    msg: String
  },
  created() {
    console.log('home::menu:::', this.$store.state.permission.menu);
  },
  computed: {
    menu() {
      if(this.$store.state.permission.menu) {
        return this.$store.state.permission.menu;
      } else {
        return [];
      }
    }
  },
  methods: {
    logout() {
      this.$store.dispatch("LOGOUT").then(res => {
        sessionStorage.clear();
        
        console.log("res::", res);
        this.$router.push("/");
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  width: 100%;
  height: 100vh;
}
.hd {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100px;
  line-height: 100px;
  color: #fff;
  padding: 0 20px;
  background-color: rgba(128, 148, 231, 1);
}
.aside {
  box-sizing: border-box;
  padding-top: 100px;
  height: 100vh;
  width: 160px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  overflow: auto;
}
.content {
  box-sizing: border-box;
  width: 100%;
  min-width: 1000px;
  padding-top: 100px;
  padding-left: 180px;
  padding-right: 20px;
}
</style>
